import './dlg-replace.css';
import {Dialog} from '../dlg/dlg.js'
import {Content} from '../dlg-content/dlg-content.js';

export class ReplaceDialog extends Dialog{
  constructor(){
    super();
      this.#init(); 
      this.#$fcontent.onkeyup = this.#monitorfcontent.bind(this);
      this.#$rcontent.onkeyup = this.#monitorrcontent.bind(this);
      this.#$ud.onclick = this.#clickud.bind(this);
      this.#$fnext.onclick = this.#findFun.bind(this);
      this.#$replaceit.onclick = this.#replaceItFun.bind(this);
      this.#$replaceall.onclick = this.#replaceAllFun.bind(this);
    }
  #init(){
    this.$ = this.querySelector;
    this.decorate(this.#html, "替换");
    this.#$fcontent = this.$('.find-content');
    this.#$rcontent = this.$('.replace-context');
    this.#$ud = this.$('.ud');
    this.#up = false;
    this.#$fnext = this.$('.find-next');
    this.#$replaceit = this.$('.replace-it');
    this.#$replaceall = this.$('.replace-all');
}
#monitorfcontent(){
    if(this.#$fcontent.value){
     this.#$fnext.removeAttribute("disabled")
   }else{
     this.#$fnext.setAttribute("disabled","disabled");
   }
}
#monitorrcontent(){
    if(this.#$rcontent.value){
     this.#$replaceit.removeAttribute("disabled")
     this.#$replaceall.removeAttribute("disabled")
   }else{
     this.#$replaceit.setAttribute("disabled","disabled");
     this.#$replaceall.setAttribute("disabled","disabled");
   }
}
#findFun(){
  this.#textContent = document.querySelector('.content').value;
  var regExp = new RegExp(this.#$fcontent.value,"g");
  var newText = this.#textContent.replace(regExp,`<div class="highlight">${this.#$fcontent.value}</div>`)
    document.querySelector('.content').value = newText;
  function clearSelection(){
    console.log(document.querySelector('.content'));
}
  function textSearch(str){
    var rStr ="" 
      +"<div class=highlight>"
      +str
      +"</div>";
  return rStr.toString('utf8');
  }
}
#replaceItFun(){
  this.#textContent = document.querySelector('.content').value;
  if(this.#up == false){
    console.log("false")
    var regExp = new RegExp(this.#$fcontent.value,'i');
    var newText = this.#textContent.replace(regExp,this.#$rcontent.value);
    document.querySelector('.content').value = newText;
  }else if(this.#up == true){ 
    console.log("true")
    var regExp = new RegExp(this.#$fcontent.value);
    var newText = this.#textContent.replace(regExp,this.#$rcontent.value);
    document.querySelector('.content').value = newText;
  }
}
#replaceAllFun(){
  this.#textContent = document.querySelector('.content').value;
  var regExp = new RegExp(this.#$fcontent.value,'g');
  var newText = this.#textContent.replace(regExp,this.#$rcontent.value);
  document.querySelector('.content').value = newText;
}
#clickud(){
  this.#up = true;
  console.log(this.#up)
}
  #$titlebar = null;
  #$main = null;
  #textContent = null;
  #$fcontent = null;
  #$rcontent = null;
  #$ud = null;
  #up = null;
  #$fnext = null;
  #$replaceit = null;
  #$replaceall = null;

  #html = ''
  +'<div class="replaceMain">'
  +'<div class="replace-content">'
    +'<div class="abouti">'
      +'<div class="find-div">'
        +'<span>查找内容(N):</span>'
        +'<input type="text" class="find-content" autofocus="autofocus">'
      +'</div>'
      +'<div class="replace-div">'
        +'<span>替换为(P):</span>'
        +'<input type="text" class="replace-context">'
      +'</div>'
        +'<br>'
        +'<br>'
        +'<br>'
      +'<div class="ud">'
        +'<input type="checkbox" class="classify-ud">'
        +'<span>区分大小写</span>'
      +'</div>'
    +'</div>'
    +'<div class="aboutr">'
      +'<input type="button" class="find-next" value="查找下一个(F)" disabled>'
      +'<input type="button" class="replace-it" value="替换(R)" disabled>'
      +'<input type="button" class="replace-all" value="全部替换(A)" disabled>'
      +'<input type="button" class="cancelr" value="取消">'
    +'</div>'
  +'</div>'
  +'</div>'
  ;
}

